<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Metas -->
	    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="author" content="Vision" />
	    <!-- Links -->
	    <link rel="icon" type="image/png" href="images/favicon.png" />
	    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600&display=swap" rel="stylesheet">
	    <link rel="stylesheet" href="icofont.min.css">
	    <link href="css/bootstrap.min.css" rel="stylesheet" />
	    <link href="css/slick.css" rel="stylesheet" />
	    
	    <link href="css/main.css" rel="stylesheet" />
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
		<style type="text/css">
			.layui-input{
				border: 0px;
				padding-top: 10px;
			}
		</style>
	</head>
	<body>
		
		<header id="home">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light ">
        <!-- Change Logo Img Here -->
        <a class="navbar-brand" href="#"><img src="images/logo.svg" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <div class="interactive-menu-button">
            <a href="#">
              <span>Menu</span>
            </a>
          </div>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="index.html">主页.<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="food.html">食品.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link active" data-scroll href="batch.html">批次.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="user.html">人员管理.</a>
            </li>
            <li class="nav-item">
              <!-- Nav Link -->
              <a class="nav-link" data-scroll href="about.html">关于我们.</a>
            </li>
			<li class="nav-item">
			  <!-- Nav Link -->
			  <a class="nav-link" data-scroll href="log.html">日志.</a>
			</li>
            <!-- <li class="nav-item dropdown">
             
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EN</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">DE </a>
                <a class="dropdown-item" href="#">ES </a>
              </div>
            </li> -->
          </ul>
          <a data-scroll href="my.html" class="contact-btn form-inline my-2 my-lg-0">
            <!-- Contacgt Us Button -->
            <button>个人信息</button>
          </a>
        </div>
      </nav>
    </div>
    </header>
		
		<table class="layui-hide" id="batch" lay-filter="batch"></table>
		
		<div class="layui-fluid" id="detailBatch" style="display:none;">
		    <div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" action="" id = "addBatchForm" lay-filter="component-form-group">
						<div class="layui-form-item">
						  <label class="layui-form-label">批次名称</label>
						  <div class="layui-input-block">
						    <span type="text" id="batchname" class="layui-input"></span>
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">数量</label>
						  <div class="layui-input-block">
							<span type="text" id="sum" class="layui-input"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">批次图片</label>
						  <div class="layui-input-block">
						    <img src="" id="pic" style="width: 180px;height: 180px;">
						  </div>
						</div>
						
						 <div class="layui-form-item layui-form-text">
						    <label class="layui-form-label">详细信息</label>
						    <div class="layui-input-block">
						      <span class="layui-input" id="detail"></span>
						    </div>
						  </div>
						  
						<div class="layui-form-item">
						  <label class="layui-form-label">到达时间</label>
						  <div class="layui-input-block">
						    <span type="text" id="time" class="layui-input"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">录入者ID</label>
						  <div class="layui-input-block">
						    <span type="text" id="recorder" class="layui-input"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">录入时间</label>
						  <div class="layui-input-block">
						    <span type="text" id="recordtime" class="layui-input"></span>
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">所属食品</label>
						  <div class="layui-input-block">
						    <span type="text" id="fromfood" class="layui-input"></span>
						  </div>
						</div>
						
					</form>
				</div>
			</div>
		</div>
	</body>
	<script src="layui/layui.js"></script>
	<script>
		layui.use(['layer','table'],function(){
			var layer = layui.layer
			,$ = layui.$
			,table = layui.table
			
			table.render({
			    elem: '#batch'
			    ,url:'http://localhost:8080/foodman/batch/findByConditions'
				,method:'POST'
				,cellMinWidth:120
				,toolbar: '#toolbarDemo'
			    ,cols: [[
			      {field:'id', title:'批次ID', fixed: 'left', unresize: true,align:'center', sort: true}
			      ,{field:'batchname', title:'批次名称',align:'center'}
			      ,{field:'sum', title:'数量'}
			      ,{field:'pic', title:'照片',  sort: true, templet: function(res){
			        return '<img src="http://localhost:8080/image/' + res.pic + '"></em>'
			      }}
			      ,{field:'detail', title:'具体信息'}
			      ,{field:'time', title:'批次到达时间'}
				  ,{field:'fromfood', title:'所属食品ID'}
				  
			    ]]
			    ,page: true
			  });//列表渲染结束
			  //监听行单击事件（双击事件为：rowDouble）
			    table.on('row(batch)', function(obj){
			      var data = obj.data;
				  $("#batchname").html(data.batchname);
				  $("#sum").html(data.sum);
				  $("#pic").attr("src",'http://localhost:8080/image/' + data.pic);
				  $("#detail").html(data.detail);
				  $("#time").html(data.time);
				  $("#recorder").html(data.recorder);
				  $("#recordtime").html(data.recordtime);
				  $("#fromfood").html(data.fromfood);
			      layer.open({
			        type: 1,
			        shade: false,
					area:["70%","80%"],
			        title: false, //不显示标题
			        content: $('#detailBatch') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
			        
			      });
			      // layer.alert(JSON.stringify(data), {
			      //   title: '当前行数据：'
			      // });
			      
			      //标注选中样式
			      obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
			    });
			
			
		})
	</script>
</html>
